/* eslint-disable @typescript-eslint/no-unused-expressions */
/* eslint-disable react-hooks/rules-of-hooks */
/* eslint-disable eqeqeq */
/* eslint-disable @typescript-eslint/no-use-before-define */
import { PageContainer } from '@ant-design/pro-components';
import type { SelectProps } from 'antd';
import { Avatar, Divider, List, Modal, Select, message } from 'antd';
import React, { useState } from 'react';
import { history, setLocale, useIntl } from 'umi';

const options: SelectProps['options'] = [];
const selectlan = [
  {
    value: 'zh-CN',
    label: '中文简体',
  },
  {
    value: 'zh-TW',
    label: '中文繁體',
  },
  {
    value: 'en-US',
    label: 'English',
  },
  {
    value: 'de-DE',
    label: 'Deutsch',
  },
];
options.push(...selectlan);

const Setting: React.FC = () => {
  const [messageApi, contextHolder] = message.useMessage();
  const [open, setOpen] = useState(false);
  const [language, setLanguage] = useState('zh-CN');
  const [confirmLoading, setConfirmLoading] = useState(false);
  const intl = useIntl();
  const t = (item: string) => intl.formatMessage({ id: `${item}` });

  const data = [
    {
      title: t('Title.Language'),
      description: t('Message.Modifyinglanguage'),
      status: '1',
      src: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg',
    },
    {
      title: t('Title.Qualifications'),
      description: t('Message.ViewCopyright'),
      status: '2',
      src: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg',
    },
    {
      title: t('Title.VersionLog'),
      description: t('Message.VersionLog'),
      status: '3',
      src: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg',
    },
    {
      title: t('Title.GlobalConfig'),
      description: t('Message.GlobalConfig'),
      status: '4',
      src: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg',
    },
  ];
  return (
    <PageContainer ghost>
      <Divider orientation="left">{t('Title.Setting')}</Divider>
      <List
        itemLayout="horizontal"
        dataSource={data}
        renderItem={(item, index) => (
          <List.Item>
            {contextHolder}
            <List.Item.Meta
              avatar={<Avatar src={item.src} />}
              title={
                <a onClick={() => handleClick(item.status)}>{item.title}</a>
              }
              description={item.description}
              key={index}
            />
          </List.Item>
        )}
      />
      <Modal
        title={t('Title.Language')}
        open={open}
        onOk={handleOk}
        confirmLoading={confirmLoading}
        onCancel={() => {
          setOpen(false);
        }}
      >
        <Select
          allowClear
          optionFilterProp="children"
          style={{ width: '100%' }}
          placeholder={t('Message.Selectlan')}
          onSelect={handleOnSelect}
          options={options}
        />
      </Modal>
    </PageContainer>
  );
  function handleClick(item: string) {
    if (item != '1') messageApi.info(item);
    item == '1' ? setOpen(true) : pushGlobalCofig(item);
  }
  function handleOk() {
    setConfirmLoading(true);
    setTimeout(() => {
      setLocale(language, false);
      setOpen(false);
      setConfirmLoading(false);
    }, 2000);
  }
  function handleOnSelect(item: string) {
    setLanguage(item);
  }
  function pushGlobalCofig(item: string) {
    switch (item) {
      case '2':
        history.push('/setting/qualifications');
        break;
      case '3':
        history.push('/setting/versionLog');
        break;
      case '4':
        history.push('/setting/globalConfig');
        break;
      default:
        break;
    }
  }
};

export default Setting;
